<template>
  <u-popup 
    :show="show" 
    :mode="mode" 
    :round="round"
    :closeable="closeable"
    :closeOnClickOverlay="closeOnClickOverlay"
    @close="handleClose"
  >
    <view class="modal-container" :class="{ 'full-screen': fullScreen }">
      <view v-if="title" class="modal-header">
        <text class="modal-title">{{ title }}</text>
      </view>
      
      <view class="modal-content" :class="{ 'has-footer': showFooter }">
        <slot>
          <text v-if="content" class="modal-text">{{ content }}</text>
        </slot>
      </view>
      
      <view v-if="showFooter" class="modal-footer">
        <slot name="footer">
          <view class="button-group">
            <custom-button
              v-if="showCancel"
              :text="cancelText"
              type="secondary"
              size="medium"
              @click="handleCancel"
            />
            <custom-button
              :text="confirmText"
              type="primary"
              size="medium"
              :loading="confirmLoading"
              @click="handleConfirm"
            />
          </view>
        </slot>
      </view>
    </view>
  </u-popup>
</template>

<script>
import CustomButton from '@/components/custom-button/index.vue'

export default {
  name: 'Modal',
  components: {
    CustomButton
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    mode: {
      type: String,
      default: 'center', // center, bottom, top, left, right
      validator: value => ['center', 'bottom', 'top', 'left', 'right'].includes(value)
    },
    round: {
      type: Number,
      default: 12
    },
    closeable: {
      type: Boolean,
      default: true
    },
    closeOnClickOverlay: {
      type: Boolean,
      default: true
    },
    fullScreen: {
      type: Boolean,
      default: false
    },
    showFooter: {
      type: Boolean,
      default: true
    },
    showCancel: {
      type: Boolean,
      default: true
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmText: {
      type: String,
      default: '确认'
    },
    confirmLoading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    handleCancel() {
      this.$emit('cancel')
    },
    handleConfirm() {
      this.$emit('confirm')
    }
  }
}
</script>

<style lang="scss" scoped>
.modal-container {
  background: #fff;
  max-height: 1067.2rpx;
  
  &.full-screen {
    height: 1334rpx; 
    max-height: 1334rpx;
  }
}

.modal-header {
  padding: 32rpx 32rpx 24rpx;
  text-align: center;
  border-bottom: 1rpx solid #f5f5f5;
}

.modal-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}

.modal-content {
  padding: 32rpx;
  max-height: 800.4rpx;
  overflow-y: auto;

}

.modal-text {
  font-size: 30rpx;
  color: #666;
  line-height: 1.6;
}

.modal-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24rpx 32rpx;
  background: #fff;
  border-top: 1rpx solid #f5f5f5;
}

.button-group {
  display: flex;
  gap: 24rpx;
  
}
</style>